<template>
    <el-card>
        <template #header>
            <el-page-header @back="onBack">
                <template #breadcrumb>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">
                            homepage
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>route</el-breadcrumb-item>
                    </el-breadcrumb>
                </template>

            </el-page-header>
        </template>
        <div id="main"></div>
    </el-card>
</template>

<script setup>
import { onMounted , ref } from 'vue'

import { ElNotification as notify } from 'element-plus'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';


const router = useRouter()
let myChart

const initLineChart = () => {
    var chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);
    var option;


    option = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            right: '30px',
            top: '2%'
        },
        grid: {
            left: '5%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    option && myChart.setOption(option);

}

onMounted(initLineChart)
window.onresize = () => {
    myChart.resize();
}

const onBack = () => {
    notify('Back')
    router.push('home')
}
</script>
<style>
#main {
    height: 500px;
}
</style>
